import React, { Component } from 'react'
import { Modal, Button, Card,message,Table } from 'antd';
import {PlusOutlined, ArrowRightOutlined} from "@ant-design/icons";
import LinkButton from "../../components/link-button"
import {reqGetCategorys, reqUpdateCategory, reqAddCategory} from "../../api/index";
import AddForm from './AddForm';
import UpdateForm from './UpdateForm';
/*
    商品分类 路由
 */
export default class Category extends Component {
    // 初始化状态
    constructor(props) {
        super(props);
        this.columns = this.initColumns();
    }

    // state属性
    state = {
        loading: false, // 是否正在获取数据中
        categorys:[], // 一级分类列表
        subCategorys:[],  // 二级分类别表      
        parentId: "0", // 当前需要显示的分类列表的parentId
        parentName: '', // 当前需要显示的分类列表的分类名称
        showStatus: 0, // 标识添加/更新的确认框是否显示, 0:都不显示, 1: 显示添加, 2:显示更新
    }   

    // 初始化Table所有列的数组
    initColumns = () => {
        return [
            {
                title: '分类名称',
                dataIndex: 'name', // 指定显示属性对应的属性名
            },
            {
                title: '操作',
                width: 300,
                render: (category) => ( // 返回需要显示的页面标签
                    <span>
                        <LinkButton onClick={() => this.showUpdate(category)}>修改分类</LinkButton>
                        {/* 如何向时间回调函数传递参数:先定义一个匿名函数,在函数中调用处理的函数并传入数据 */}
                        {
                            this.state.parentId === "0" ? <LinkButton onClick={() => this.showSubCategorys(category)}>查看子分类</LinkButton> : null
                        }
                    </span>
                )
            }
        ];
    }

    // 异步获取一级/二级分类列表显示
    // parentId:如果没有指定根据状态中的parentId请求,如果指定了根据指定的请求
    getCategorys = async (pId=this.state.parentId) => {
        // 发送请求前,显示loading
        this.setState({loading: true})
        const parentId = pId || this.state.parentId;
        // 发送异步ajax请求获取数据
        const result = await reqGetCategorys(parentId);
        // 请求完成后,隐藏loading
        this.setState({loading:false})
        if(result.status === 0){
            // 取出分类数组
           const categorys = result.data;
           if(parentId === "0") {
                this.setState({categorys});
           } else {
                this.setState({subCategorys:categorys})
           }
            
        } else {
            message.error("获取分类列表失败")
        }
    }
    // 显示一级分类列表
    showFirstCategorys = () =>{
        // 更新为显示一级列表的状态
        this.setState({
            parentId:"0",
            parentName:"",
            subCategorys:[]
        })
    }


    // 显示指定一级分类的二级分类列表
    showSubCategorys = (category)=>{
        // 更新状态(异步更新)
        this.setState({
            parentId:category._id,
            parentName:category.name
        }, () => { // 状态更新且重新render()后执行
            // console.log("parentId", this.state.parentId);
            // 获取二级分类
            this.getCategorys();
        })
        // setState() 不能立即获取最新的状态:因为是异步更新状态的
    }   

    // 点击取消
    handleCancel = () => {
        this.setState({showStatus: 0});
    }

    // 添加分类
    addCategory = async () => {
        this.myAddForm.current.validateFields()
        .then(
            async values => {
                // 隐藏确认框
                this.setState({showStatus: 0});

                // 准备数据   
                const {parentId, categoryName} = values;
                const result = await reqAddCategory(parentId,categoryName);
                if(result.status === 0) {
                    
                    // 添加的分类就是当前分类列表下的分类
                    if(parentId === this.state.parentId){
                        // 重新获取当前分类列表显示
                        this.getCategorys();
                    } else if (parentId === "0") { // 在二级分类列表下添加一级分类,重新获取一级分类列表,但不需要显示一级列表
                        this.getCategorys("0");
                    }
                    
                }
            }
        )
        .catch(errorInfo => {
            message.error(errorInfo.errorFields[0].errors[0]);
        })
        
    }

    // 更新分类
    updateCategory =  () => {
        // 进行表单验证,只有通过了才处理
        this.myUpdateForm.current.validateFields()
        .then(
            async values => {
                    // 隐藏确认框
                    this.setState({showStatus: 0});
                    // 准备数据
                    const categoryId = this.category._id;
                    const {categoryName} = values;
                    // 发送请求更新
                    const result = await reqUpdateCategory({categoryId, categoryName})
                    if(result.status === 0) {
                        // 重新显示列表
                        this.getCategorys();
                    }
            }
        )
        .catch(errorInfo => {
            message.error(errorInfo.errorFields[0].errors[0]);
        })
            
    }

    // 显示添加的确认框
    showAdd = () =>{
        this.setState({showStatus: 1});
    }

    // 显示更新的确认框
    showUpdate = (category) => {
        // 保存分类对象
        this.category = category;
        // 更新状态
        this.setState({showStatus: 2});
    }


    // 执行异步任务,发异步请求
    componentDidMount() {
        this.getCategorys();
    }

    render() {
        // 读取状态列表
        const {categorys,subCategorys,parentId,parentName, loading, showStatus} = this.state;

        // 读取指定的分类
        const category = this.category || { name: "" };

        // card的左侧标题
        const title = parentId === "0" ? "一级分类列表" : (
            <span>
                <LinkButton onClick={this.showFirstCategorys}>一级分类列表</LinkButton><ArrowRightOutlined style={{marginRight: 5}}/>
                 <span>{parentName}</span>
            </span>
        )

        // card的右侧
        const extra = (
            <Button type="primary" onClick={this.showAdd}>
                <PlusOutlined />添加
            </Button>
        )

        return (
            <Card title={title} extra={extra} >
                <Table
                bordered
                rowKey="_id" 
                dataSource={parentId === "0"? categorys: subCategorys}
                columns={this.columns}
                pagination={{defaultPageSize: 5, showQuickJumper: true}} 
                loading={loading}
                />

                <Modal 
                    title="添加分类" 
                    visible={showStatus === 1} 
                    onOk={this.addCategory} 
                    onCancel={this.handleCancel}
                    destroyOnClose={true}
                >
                    <AddForm 
                    categorys={categorys} 
                    parentId={parentId} 
                    setAddForm={(myAddForm) => this.myAddForm = myAddForm}
                    />
                </Modal>
                
                <Modal 
                    title="更新分类" 
                    visible={showStatus === 2} 
                    onOk={this.updateCategory} 
                    onCancel={this.handleCancel}
                    destroyOnClose={true}
                >
                    <UpdateForm 
                    categoryName={category.name} 
                    setMyUpdateForm={(myUpdateForm) => this.myUpdateForm = myUpdateForm}/>
                </Modal>
            </Card>
        )
    }
}
